<!-- 分页列表模板 -->
<template>
    <PageTable ref="pageTableRef" :headers="tableHeaders" allow-search :search-form="searchForm"
        :loadCallable="loadCallable" :btns="btns">
    </PageTable>


    <!-- BEGIN 新增弹框 -->
    <el-dialog v-model="addForm.showDialog" :draggable="true" header="新增">
        <el-form ref="addFormRef" :model="addForm.formData" :rules="addForm.rules" label-width="auto">

            <el-form-item label="配置名称" prop="name">
                <el-input v-model="addForm.formData.name" name="name"></el-input>
            </el-form-item>

            <el-button :loading="addForm.onSubmiting" type="primary" @click="onAddSubmit(addFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 新增弹框  -->

    <!-- BEGIN 编辑弹框 -->
    <el-dialog v-model="editForm.showDialog" :draggable="true" header="编辑">
        <el-form ref="editFormRef" :model="editForm.formData" label-width="auto">
            <el-input v-model="editForm.formData.id" type="hidden"></el-input>
            <el-button :loading="editForm.onSubmiting"  type="primary" @click="onEditSubmit(editFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 编辑弹框  -->

</template>

<script setup>
import PageTable from '@/components/PageTable.vue';
import { ref } from 'vue';

// pagetable的引用
const pageTableRef = ref();

// 表格列设置,如果需要动态设置则用 ref包裹
const tableHeaders = [
    {
        prop: 'id',
        label: 'ID',
        width: 50
    },
    {
        prop: 'val',
        label: '值',
        // 自定义显示内容
        template(row) {
            return ''
        }
    }
]

// 搜索表单
const searchForm = ref({
    formItems: [
        {
            name: 's_name',
            type: 'text',
            placeholder: '分组名称',
        },
        {
            name: 's_code',
            type: 'text',
            placeholder: '分组标识',
        },
    ]
})

// 加载数据的接口 Promise
const loadCallable = settingApi.pageList;

// 表格顶部区域的按钮
const btns = {
    // 删除选中按钮
    deleteAll: {
        text: '删除选中',
        click(ids) {
            // todo
        }
    },
    add: {
        text: '新增',
        click() {
            // todo

        }
    },
    tableHeaderBtns: [
        {
            type: 'warning',
            text: '刷新缓存',
            click() {
                // todo

            }
        }
    ],
    rowBtns: [{
        text: '编辑',
        click(rows, idx) {
            // todo
        },
    },]
};

// 新增表单引用
const addFormRef = ref()

// 新增表单数据
const addForm = ref({
    showDialog : false,
    onSubmiting: false,
    rules : {
        name : [{required:true,message:'必填',type:'string'}],
        code : [{required:true,message:'必填',type:'string'}],
        remark : [{message:'任意文字',type:'string'}],

    },
    formData : {
        name : ''
    }
})


// 编辑更新
const editFormRef = ref();

const editForm = ref({
    showDialog : false,
    onSubmiting: false,
    rules : {
        name : []
    },
    formData : {
        id : 0,
        name : ''
    }
})


</script>